<template>
  <div class="com-content-wp">
    <n-grid x-gap="12" :cols="3">
      <n-gi>
        <div class="wp_item_title">大小</div>
      </n-gi>
      <n-gi>
        <n-input-number v-model:value="com.attr.w" :min="130" size="small"/>
      </n-gi>
      <n-gi>
        <n-input-number v-model:value="com.attr.h" :min="130" size="small"/>
      </n-gi>
    </n-grid>
    <n-grid x-gap="12" :cols="3">
      <n-gi>
        <div class="wp_item_title">位置</div>
      </n-gi>
      <n-gi>
        <n-input-number v-model:value="com.attr.x" size="small"/>
      </n-gi>
      <n-gi>
        <n-input-number v-model:value="com.attr.y" size="small"/>
      </n-gi>
    </n-grid>
    <n-grid x-gap="12" :cols="3">
      <n-gi>
        <div class="wp_item_title">旋转角度</div>
      </n-gi>
      <n-gi>
        <n-input-number v-model:value="com.attr.deg" size="small"/>
      </n-gi>
      <n-gi>
        <div class="deg-append">
          <i class="iconfont icon-chuizhi"></i>
          <i class="iconfont icon-shuiping"></i>
        </div>
      </n-gi>
    </n-grid>
    <n-grid x-gap="12" :cols="3">
      <n-gi>
        <div class="wp_item_title">透明度</div>
      </n-gi>
      <n-gi>
        <n-slider size="small" v-model:value="com.attr.opacity" :step="0.1" :min="0" :max="1"/>
      </n-gi>
      <n-gi>
        <n-input-number v-model:value="com.attr.opacity" size="small" :max="1" :min="0" :step="0.1"/>
      </n-gi>
    </n-grid>
    <n-grid x-gap="12" :cols="3">
      <n-gi>
        <div class="wp_item_title">背景色</div>
      </n-gi>
      <n-gi :span="2">
        <n-color-picker v-model:value="com.config.global.backgroundColor" size="small"/>
      </n-gi>
    </n-grid>
    <n-grid x-gap="12" :cols="3">
      <n-gi>
        <div class="wp_item_title">边框颜色</div>
      </n-gi>
      <n-gi>
        <n-color-picker v-model:value="com.config.global.color[0]" size="small"/>
      </n-gi>
      <n-gi>
        <n-color-picker v-model:value="com.config.global.color[1]" size="small"/>
      </n-gi>
    </n-grid>

    <n-grid x-gap="12" :cols="3">
      <n-gi>
        <div class="wp_item_title">内容</div>
      </n-gi>
      <n-gi :span="2">
        <n-input type="textarea" v-model:value="com.config.content" :autosize="{
                    minRows: 3,
                    maxRows: 5
                  }" clearable/>
      </n-gi>
    </n-grid>
    <n-grid x-gap="12" :cols="3">
      <n-gi>
        <div class="wp_item_title">水平对齐方式</div>
      </n-gi>
      <n-gi>
        <div class="deg-append">
          <template v-for="item in textAlignList">
            <n-tooltip placement="bottom" trigger="hover">
              <template #trigger>
                <i @click="handleTextAlign(item)"
                   class="iconfont"
                   :key="item.prop"
                   :class="[item.icon,textAlignValue === item.prop?'appendActive':'']">
                </i>
              </template>
              <span class="tip_config">{{ item.label }}</span>
            </n-tooltip>
          </template>
        </div>
      </n-gi>
      <n-gi>
        <div class="deg-append">
          <template v-for="item in alignItemsList">
            <n-tooltip placement="bottom" trigger="hover">
              <template #trigger>
                <i @click="handleAlignItems(item)"
                   class="iconfont"
                   :key="item.prop"
                   :class="[item.icon,alignItemsValue === item.prop?'appendActive':'']">
                </i>
              </template>
              <span class="tip_config">{{ item.label }}</span>
            </n-tooltip>
          </template>
        </div>
      </n-gi>
    </n-grid>
    <n-collapse arrow-placement="right" class="config-manager-page-collapse">
      <n-collapse-item title="内容样式" name="1">
        <n-grid x-gap="12" :cols="3">
          <n-gi>
            <div class="wp_item_title">字体</div>
          </n-gi>
          <n-gi :span="2">
            <n-select size="small"
                      v-model:value="com.config.textStyle.fontFamily"
                      :options="fontFamilyList"/>
          </n-gi>
        </n-grid>

        <n-grid x-gap="12" :cols="3">
          <n-gi>
            <div class="wp_item_title">字号</div>
          </n-gi>
          <n-gi :span="2">
            <n-input-number v-model:value="com.config.textStyle.fontSize" :min="1" :step="1" size="small"/>
          </n-gi>
        </n-grid>

        <n-grid x-gap="12" :cols="3">
          <n-gi>
            <div class="wp_item_title">颜色</div>
          </n-gi>
          <n-gi :span="2">
            <n-color-picker v-model:value="com.config.textStyle.color" size="small"/>
          </n-gi>
        </n-grid>

        <n-grid x-gap="12" :cols="3">
          <n-gi>
            <div class="wp_item_title">字体粗细</div>
          </n-gi>
          <n-gi :span="2">
            <n-select size="small" v-model:value="com.config.textStyle.fontWeight" :options="fontWeightList"/>
          </n-gi>
        </n-grid>
        <n-grid x-gap="12" :cols="3">
          <n-gi>
            <div class="wp_item_title">首字母缩进</div>
          </n-gi>
          <n-gi :span="2">
            <n-input-number v-model:value="com.config.textStyle.textIndent" :min="0" :step="1" size="small">
              <template #suffix>em</template>
            </n-input-number>
          </n-gi>
        </n-grid>
        <n-grid x-gap="12" :cols="3">
          <n-gi>
            <div class="wp_item_title">文字间隔</div>
          </n-gi>
          <n-gi :span="2">
            <n-input-number v-model:value="com.config.textStyle.letterSpacing"
                            :show-button="false" size="small">
              <template #suffix>px</template>
            </n-input-number>
          </n-gi>
        </n-grid>
      </n-collapse-item>
    </n-collapse>
  </div>
</template>

<script>
import { defineComponent, onMounted, ref } from "vue";
// import { NColorPicker, NForm, NFormItem, NGi, NGrid, NInput, NInputNumber, NSelect, NSlider, NTooltip,NCollapse,
//   NCollapseItem, } from "naive-ui";
import { alignItemsList, fontFamilyList, fontWeightList, textAlignList } from "../../../../utils/dict";

export default defineComponent({
  name: "DvBorderBox1Props",
  props: {
    com: {
      type: Object,
      required: true
    }
  },
  components: {
    // NColorPicker, NForm, NFormItem, NGi, NGrid, NInput, NInputNumber, NSelect, NTooltip, NSlider,NCollapse,
    // NCollapseItem,
  },
  setup(props) {
    onMounted(() => {
      alignItemsValue.value = props.com.config.textStyle.alignItems;
      textAlignValue.value = props.com.config.textStyle.textAlign;
    });
    const alignItemsValue = ref();
    const textAlignValue = ref();
    const handleAlignItems = (item) => {
      props.com.config.textStyle.alignItems = item.value;
      alignItemsValue.value = item.value;
    };
    const handleTextAlign = (item) => {
      props.com.config.textStyle.textAlign = item.value;
      textAlignValue.value = item.value;
    };
    return {
      alignItemsValue,
      textAlignValue,
      fontFamilyList: fontFamilyList,
      fontWeightList: fontWeightList,
      textAlignList: textAlignList,
      alignItemsList: alignItemsList,
      handleAlignItems: handleAlignItems,
      handleTextAlign: handleTextAlign,
    };
  }
});
</script>

<style lang="less" scoped>
@import "../../../../style/page/design-config.less";
.config-manager-page-collapse {
  padding: 8px 7px;
  font-size: 12px;
}
</style>